GatsbyでContentfulのマークダウン形式のテキストを読み込んでHTMLとして出力する
どうも、ベルリンオフィスの小西です。
ヘッドレスCMSのContentfulで長文入力フィールドを作る際、マークダウン形式 とリッチテキスト形式が選択できます。
基本的には使いたい方を使えばいいのですが、Contentful的にはマークダウン形式がおすすめな気がします。
リッチテキストを扱う方法については以前記事を書いたので、 今回はContentfulで投稿されたマークダウンテキストをGatsbyでパースしてHTML表示する方法についてまとめます。
Gatsbyでフロントエンドを作る際、マークダウンを出力する方法はいくつかありますが、今回はGatsbyのオフィシャルプラグインのみを使う方法で行います。
前提
- Gatsby : 4系以降のバージョン
- Gatsbyプラグイン
gatsby-source-contentful: 7系以降のバージョン- 3系以前のバージョンの場合、Contentfulへのクエリの返り値が異なるため、最新のバージョンにアップデートしたほうが無難です。
Contentful側
基本的にはすでにContentfulを使っていらっしゃる方向けの記事なので、サクッとコンテンツモデルを作ります。
[Long text, full-text search]にチェックをいれます。
[Appearance]タブに移動し、[Markdown]形式が選択されていることを確認します。
上記の設定で[Confirm]してコンテンツモデルを作成し、記事を投稿しておきます。
Gatsby側の構築
Gatsby公式プラグインの gatsby-transformer-remark を使うのでインストールします。
npm install gatsby-transformer-remark
また gatsby-config.js にパッケージ設定を記述します。
{
resolve: `gatsby-transformer-remark`,
options: {
// Footnotes mode (default: true)
footnotes: true,
// GitHub Flavored Markdown mode (default: true)
gfm: true,
},
},
フロント側の記述についてですが、先のパッケージをインストールした後、GraphiQLの返り値内の該当マークダウンテキストの子要素として childMarkdownRemark が取得できるようになります。
これでContentfulのマークダウン形式のコンテンツをパースした状態で取得できます。
下記がクエリ例です。ハイライト部分がマークダウンを取得するクエリになります。
export const query = graphql`
query QueryTop {
contentfulSamplePost(contentful_id: {eq: "2oYfjntH8EKpiPy3oEPKW4"}) {
id
title
content {
childMarkdownRemark {
html
}
}
}
}
`;
出力サンプルはこんな感じです。
const IndexPage = ({ data }) => {
const post = data.contentfulSamplePost;
return (
<Layout>
<div>
<h2>Contentful Sample Post</h2>
<div
dangerouslySetInnerHTML={{__html: post.content.childMarkdownRemark.html}}
/>
</div>
</Layout>
)
}
export default IndexPage
htmlの代わりに rawMarkdownBody でプレーンな本文を取得できます。
childMarkdownRemark {
rawMarkdownBody
}
Excerpt
Excerpt（抜粋）を取得することもできます。
デフォルトでは140文字、 pruneLength を指定することでより短い/長い抜粋文を取得可能です。
childMarkdownRemark {
excerpt(pruneLength: 500)
}
またexcerptはデフォルトでプレーンテキストを返しますが、formatをHTMLもしくはマークダウンに変更することも可能です。
childMarkdownRemark {
excerpt(format: HTML)
}
以上、ざっくりですが、GatsbyからContentfulのマークダウンテキストを扱う方法でした。
クラスメソッドはContentfulのパートナーとして導入のお手伝いをさせていただいています。
